<?php
// 配置键定义
$configKey = isset($configKey) ? $configKey : 'pricing';

// 价格方案默认配置
$pricingConfig = [
    'section_id' => $configKey,
    'section_pretitle' => '透明定价',
    'section_title' => '为您的需求选择合适方案',
    'section_subtitle' => '灵活的价格方案，满足不同规模企业的需求，按需选择，物超所值',
    'bg_color' => 'white',
    'layout' => 'grid', // grid 或 table
    'columns' => '3',
    'highlight_featured' => true,
    'texts' => [
        'featured_label' => '最受欢迎',
        'common_note' => '所有方案均提供7天免费试用，无需信用卡。随时可以升级或降级您的方案。',
        'price_details_link' => '查看完整价格说明',
        'price_details_url' => '/faq.php#pricing'
    ],
    'billing_cycle' => [
        'enabled' => true,
        'monthly_label' => '月付',
        'yearly_label' => '年付',
        'yearly_discount' => '节省20%'
    ],
    'plans' => [
        [
            'id' => 'basic',
            'name' => '基础版',
            'description' => '适合个人和小型项目使用',
            'price' => [
                'monthly' => 99,
                'yearly' => 79
            ],
            'currency' => '¥',
            'period' => '月',
            'button_text' => '选择方案',
            'button_url' => '/contact.php?plan=basic',
            'button_style' => 'outline',
            'features' => [
                '最多5个项目',
                '基础功能访问',
                '电子邮件支持',
                '10GB 存储空间',
                '每月报告',
                '社区论坛访问'
            ],
            'is_featured' => false
        ],
        [
            'id' => 'pro',
            'name' => '专业版',
            'description' => '适合成长型企业和团队使用',
            'price' => [
                'monthly' => 299,
                'yearly' => 239
            ],
            'currency' => '¥',
            'period' => '月',
            'button_text' => '选择方案',
            'button_url' => '/contact.php?plan=pro',
            'button_style' => 'primary',
            'features' => [
                '无限项目数量',
                '全部功能访问',
                '优先电子邮件支持',
                '100GB 存储空间',
                '每周报告',
                '专属客户经理',
                'API 访问权限',
                '团队协作功能'
            ],
            'is_featured' => true
        ],
        [
            'id' => 'enterprise',
            'name' => '企业版',
            'description' => '适合大型企业和复杂需求',
            'price' => [
                'monthly' => 899,
                'yearly' => 719
            ],
            'currency' => '¥',
            'period' => '月',
            'button_text' => '联系销售',
            'button_url' => '/contact.php?plan=enterprise',
            'button_style' => 'secondary',
            'features' => [
                '无限项目数量',
                '定制化功能开发',
                '24/7 电话支持',
                '无限存储空间',
                '每日报告与分析',
                '专属团队支持',
                '高级 API 集成',
                '高级安全与合规',
                '培训与实施支持',
                '定制化报表'
            ],
            'is_featured' => false
        ]
    ],
    // 样式类配置字段
    'classes' => [
        // 区块相关样式
        'section_container' => 'py-20',
        'container' => 'mx-auto px-4 sm:px-6 lg:px-8',
        'section_header' => 'text-center max-w-3xl mx-auto mb-12',
        'section_pretitle' => 'inline-block text-sm font-semibold text-blue-600 uppercase tracking-wider mb-2',
        'section_title' => 'text-3xl md:text-4xl font-bold text-gray-900 mb-4',
        'section_subtitle' => 'text-lg text-gray-600 mb-8',
        'common_note' => 'text-center mt-12 text-gray-500 text-sm',
        'details_link' => 'text-blue-600 hover:underline mt-2 inline-block',

        // 结算周期切换样式
        'billing_toggle_container' => 'inline-flex p-1 bg-gray-100 rounded-full mb-8',
        'billing_toggle' => 'px-6 py-2 rounded-full font-medium transition-all duration-200',
        'billing_toggle_active' => 'bg-white shadow-sm text-gray-900',
        'billing_toggle_inactive' => 'text-gray-600',
        'yearly_discount' => 'ml-2 text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded',

        // 网格布局样式
        'grid_container' => 'grid gap-8',
        'pricing_card' => 'relative rounded-2xl overflow-hidden border border-gray-200 transition-all duration-300',
        'pricing_card_featured' => 'border-blue-600 shadow-xl transform md:-translate-y-4 z-10',
        'pricing_card_hover' => 'hover:shadow-lg',
        'card_content' => 'p-8',
        'card_content_featured' => 'pt-12',
        'card_title' => 'text-2xl font-bold text-gray-900 mb-2',
        'card_description' => 'text-gray-600 mb-6',
        'price_display' => 'mb-6',
        'price_currency' => 'text-4xl font-bold text-gray-900',
        'price_period' => 'text-gray-500 ml-2 mb-1',
        'featured_label' => 'absolute top-0 inset-x-0 bg-blue-600 text-white text-center py-1 text-sm font-medium',
        'features_list' => 'space-y-3',
        'feature_item' => 'flex items-start',
        'feature_icon' => 'fa fa-check text-green-500 mt-1 mr-3 flex-shrink-0',
        'feature_text' => 'text-gray-600 text-sm',

        // 表格布局样式
        'table_container' => 'overflow-hidden shadow-lg rounded-xl border border-gray-200',
        'pricing_table' => 'min-w-full divide-y divide-gray-200',
        'table_header' => 'text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200',
        'table_header_featured' => 'border-b-2 border-blue-200',
        'table_body' => 'divide-y divide-gray-200',
        'table_row_hover' => 'hover:bg-gray-50 transition-colors',
        'table_feature_cell' => 'px-6 py-4 whitespace-nowrap text-sm text-gray-700',
        'table_value_cell' => 'px-6 py-4 whitespace-nowrap text-center',

        // 按钮样式
        'button_base' => 'w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 transform hover:-translate-y-1 inline-block text-center',
        'button_primary' => 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 shadow-md',
        'button_secondary' => 'border-2 border-gray-600 text-gray-700 hover:bg-gray-50 shadow-sm',
        'button_outline' => 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50',
        'button_featured' => 'mb-8'
    ]
];

// 合并配置（优先级：页面配置 > 默认配置）
$data = array_merge($pricingConfig, $pageConfig['components'][$configKey] ?? []);



// 处理列布局
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 md:grid-cols-2',
    '3' => 'grid-cols-1 md:grid-cols-3',
    '4' => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
];
$columnClass = $columnClasses[$data['columns']] ?? $columnClasses['3'];

// 按钮样式处理
function getPricingButtonClass($style, $isFeatured = false, $classes)
{
    $base = $classes['button_base'];
    $featured = $isFeatured ? ' ' . $classes['button_featured'] : '';

    switch ($style) {
        case 'primary':
            return $base . ' ' . $classes['button_primary'] . $featured;
        case 'secondary':
            return $base . ' ' . $classes['button_secondary'] . $featured;
        case 'outline':
            return $base . ' ' . $classes['button_outline'] . $featured;
        default:
            return $base . ' ' . $classes['button_primary'] . $featured;
    }
}

// 检查是否启用年付/月付切换
$billingCycleEnabled = $data['billing_cycle']['enabled'] ?? false;
?>

<!-- 价格方案区域 -->
<section id="<?php echo htmlspecialchars($data['section_id']); ?>" class="<?php echo $bgClass; ?> <?php echo $data['classes']['section_container']; ?>">
    <div class="<?php echo $data['classes']['container']; ?>">
        <!-- 区域标题 -->
        <div class="<?php echo $data['classes']['section_header']; ?>">
            <span class="<?php echo $data['classes']['section_pretitle']; ?>">
                <?php echo htmlspecialchars($data['section_pretitle']); ?>
            </span>

            <h2 class="<?php echo $data['classes']['section_title']; ?>">
                <?php echo htmlspecialchars($data['section_title']); ?>
            </h2>

            <p class="<?php echo $data['classes']['section_subtitle']; ?>">
                <?php echo htmlspecialchars($data['section_subtitle']); ?>
            </p>

            <!-- 结算周期切换（月付/年付） -->
            <?php if ($billingCycleEnabled): ?>
                <div class="<?php echo $data['classes']['billing_toggle_container']; ?>">
                    <button id="monthly-billing" class="<?php echo $data['classes']['billing_toggle']; ?> <?php echo $data['classes']['billing_toggle_active']; ?>">
                        <?php echo htmlspecialchars($data['billing_cycle']['monthly_label']); ?>
                    </button>
                    <button id="yearly-billing" class="<?php echo $data['classes']['billing_toggle']; ?> <?php echo $data['classes']['billing_toggle_inactive']; ?>">
                        <?php echo htmlspecialchars($data['billing_cycle']['yearly_label']); ?>
                        <?php if (!empty($data['billing_cycle']['yearly_discount'])): ?>
                            <span class="<?php echo $data['classes']['yearly_discount']; ?>">
                                <?php echo htmlspecialchars($data['billing_cycle']['yearly_discount']); ?>
                            </span>
                        <?php endif; ?>
                    </button>
                </div>
            <?php endif; ?>
        </div>

        <!-- 价格方案容器 -->
        <?php if ($data['layout'] === 'table'): ?>
            <!-- 表格布局 - 适合特性对比 -->
            <div class="<?php echo $data['classes']['table_container']; ?>">
                <table class="<?php echo $data['classes']['pricing_table']; ?>">
                    <thead>
                        <tr>
                            <th class="<?php echo $data['classes']['table_header']; ?> px-6 py-4 w-1/3">
                                特性
                            </th>
                            <?php foreach ($data['plans'] as $plan): ?>
                                <th class="px-6 py-4 text-center <?php echo $plan['is_featured'] ? $data['classes']['table_header_featured'] : ''; ?>">
                                    <div class="flex flex-col h-full">
                                        <h3 class="text-lg font-semibold text-gray-900">
                                            <?php echo htmlspecialchars($plan['name']); ?>
                                        </h3>
                                        <p class="text-sm text-gray-500 mb-2">
                                            <?php echo htmlspecialchars($plan['description']); ?>
                                        </p>
                                        <div class="<?php echo $data['classes']['price_display']; ?> mb-4">
                                            <span class="<?php echo $data['classes']['price_currency']; ?>">
                                                <?php echo htmlspecialchars($plan['currency']); ?>
                                                <span class="monthly-price"><?php echo htmlspecialchars($plan['price']['monthly']); ?></span>
                                                <span class="yearly-price hidden"><?php echo htmlspecialchars($plan['price']['yearly']); ?></span>
                                            </span>
                                            <span class="<?php echo $data['classes']['price_period']; ?>">
                                                /<?php echo htmlspecialchars($plan['period']); ?>
                                            </span>
                                        </div>
                                        <a
                                            href="<?php echo htmlspecialchars($plan['button_url']); ?>"
                                            class="<?php echo getPricingButtonClass($plan['button_style'], $plan['is_featured'], $data['classes']); ?>">
                                            <?php echo htmlspecialchars($plan['button_text']); ?>
                                        </a>
                                    </div>
                                </th>
                            <?php endforeach; ?>
                        </tr>
                    </thead>
                    <tbody class="<?php echo $data['classes']['table_body']; ?>">
                        <?php
                        // 获取所有方案的特性并合并去重
                        $allFeatures = [];
                        foreach ($data['plans'] as $plan) {
                            $allFeatures = array_merge($allFeatures, $plan['features']);
                        }
                        $allFeatures = array_unique($allFeatures);

                        foreach ($allFeatures as $feature): ?>
                            <tr class="<?php echo $data['classes']['table_row_hover']; ?>">
                                <td class="<?php echo $data['classes']['table_feature_cell']; ?>">
                                    <?php echo htmlspecialchars($feature); ?>
                                </td>
                                <?php foreach ($data['plans'] as $plan): ?>
                                    <td class="<?php echo $data['classes']['table_value_cell']; ?>">
                                        <?php if (in_array($feature, $plan['features'])): ?>
                                            <i class="fa fa-check text-green-500 text-xl"></i>
                                        <?php else: ?>
                                            <i class="fa fa-times text-gray-300 text-xl"></i>
                                        <?php endif; ?>
                                    </td>
                                <?php endforeach; ?>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php else: ?>
            <!-- 网格布局 - 适合突出每个方案 -->
            <div class="<?php echo $data['classes']['grid_container']; ?> <?php echo $columnClass; ?>">
                <?php if (isset($data['plans'])) { ?>
                    <?php foreach ($data['plans'] as $plan): ?>
                        <div class="<?php echo $data['classes']['pricing_card']; ?> 
                                <?php echo $plan['is_featured'] ? $data['classes']['pricing_card_featured'] : $data['classes']['pricing_card_hover']; ?> 
                                group">

                            <!-- 特色标签 -->
                            <?php if ($plan['is_featured'] && $data['highlight_featured']): ?>
                                <div class="<?php echo $data['classes']['featured_label']; ?>">
                                    <?php echo htmlspecialchars($data['texts']['featured_label']); ?>
                                </div>
                            <?php endif; ?>

                            <div class="<?php echo $data['classes']['card_content']; ?> <?php echo $plan['is_featured'] ? $data['classes']['card_content_featured'] : ''; ?>">
                                <!-- 方案名称和描述 -->
                                <h3 class="<?php echo $data['classes']['card_title']; ?>">
                                    <?php echo htmlspecialchars($plan['name']); ?>
                                </h3>
                                <p class="<?php echo $data['classes']['card_description']; ?>">
                                    <?php echo htmlspecialchars($plan['description']); ?>
                                </p>

                                <!-- 价格信息 -->
                                <div class="<?php echo $data['classes']['price_display']; ?>">
                                    <div class="flex items-end">
                                        <span class="<?php echo $data['classes']['price_currency']; ?>">
                                            <?php echo htmlspecialchars($plan['currency']); ?>
                                            <span class="monthly-price"><?php echo htmlspecialchars($plan['price']['monthly']); ?></span>
                                            <span class="yearly-price hidden"><?php echo htmlspecialchars($plan['price']['yearly']); ?></span>
                                        </span>
                                        <span class="<?php echo $data['classes']['price_period']; ?>">
                                            /<?php echo htmlspecialchars($plan['period']); ?>
                                        </span>
                                    </div>
                                </div>

                                <!-- 选择按钮 -->
                                <a
                                    href="<?php echo htmlspecialchars($plan['button_url']); ?>"
                                    class="<?php echo getPricingButtonClass($plan['button_style'], $plan['is_featured'], $data['classes']); ?>">
                                    <?php echo htmlspecialchars($plan['button_text']); ?>
                                </a>

                                <!-- 特性列表 -->
                                <ul class="<?php echo $data['classes']['features_list']; ?>">
                                    <?php foreach ($plan['features'] as $feature): ?>
                                        <li class="<?php echo $data['classes']['feature_item']; ?>">
                                            <i class="<?php echo $data['classes']['feature_icon']; ?>"></i>
                                            <span class="<?php echo $data['classes']['feature_text']; ?>"><?php echo htmlspecialchars($feature); ?></span>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php } ?>
            </div>
        <?php endif; ?>

        <!-- 通用说明 -->
        <div class="<?php echo $data['classes']['common_note']; ?>">
            <p><?php echo htmlspecialchars($data['texts']['common_note']); ?></p>
            <a href="<?php echo htmlspecialchars($data['texts']['price_details_url']); ?>" class="<?php echo $data['classes']['details_link']; ?>">
                <?php echo htmlspecialchars($data['texts']['price_details_link']); ?> <i class="fa fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>
</section>

<!-- 价格切换脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        <?php if ($billingCycleEnabled): ?>
            // 获取切换按钮和价格元素
            const monthlyToggle = document.getElementById('monthly-billing');
            const yearlyToggle = document.getElementById('yearly-billing');
            const monthlyPrices = document.querySelectorAll('.monthly-price');
            const yearlyPrices = document.querySelectorAll('.yearly-price');
            const activeClass = <?php echo json_encode($data['classes']['billing_toggle_active']); ?>;
            const inactiveClass = <?php echo json_encode($data['classes']['billing_toggle_inactive']); ?>;

            // 月付切换
            monthlyToggle.addEventListener('click', function() {
                monthlyToggle.classList.add(...activeClass.split(' '));
                monthlyToggle.classList.remove(...inactiveClass.split(' '));
                yearlyToggle.classList.remove(...activeClass.split(' '));
                yearlyToggle.classList.add(...inactiveClass.split(' '));

                monthlyPrices.forEach(price => price.classList.remove('hidden'));
                yearlyPrices.forEach(price => price.classList.add('hidden'));
            });

            // 年付切换
            yearlyToggle.addEventListener('click', function() {
                yearlyToggle.classList.add(...activeClass.split(' '));
                yearlyToggle.classList.remove(...inactiveClass.split(' '));
                monthlyToggle.classList.remove(...activeClass.split(' '));
                monthlyToggle.classList.add(...inactiveClass.split(' '));

                yearlyPrices.forEach(price => price.classList.remove('hidden'));
                monthlyPrices.forEach(price => price.classList.add('hidden'));
            });
        <?php endif; ?>
    });
</script>